iT邦幫忙

DAY 13
0

網路技術學習筆記系列 第 13

CSS筆記5 border-box 與 content-box 的區別

  • 分享至 

  • xImage
  •  

border-box 與 content-box 的區別

HTML

<meta charset="UTF-8">

<title>exercise7</title>

<link rel="stylesheet" href="sample7.css">

<div id="blk">this is my div</div>

border-box:設定的寬跟高就是整個box的大小

CSS

#blk{

display: block;

height: 200px;

width: 300px;

background-color: yellow;

border: 5px solid black;

padding: 50px;

margin : 0px auto; /*水平置中*/

text-align: center; /*文字置中*/

box-sizing: border-box;

}

DEMO:

content-box : 剛剛設定的寬高是針對內容的,如果有padding跟border大小還會往上加

CSS

#blk{

display: block;

height: 200px;

width: 300px;

background-color: yellow;

border: 5px solid black;

padding: 50px;

margin : 0px auto; /*水平置中*/

text-align: center; /*文字置中*/

box-sizing: content-box;

}


上一篇
CSS筆記4 inheritance
下一篇
CSS 計算法則
系列文
網路技術學習筆記17
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言